<template>
  <div class="grand-child">
    <h3>孙组件</h3>
    <h4>钱包: {{ money }}</h4>
    <!-- 在inject中利用默认值的类型辅助类型推断,以去除未知类型的警告 -->
    <h4>一辆{{ car.brand }}, 价值{{ car.price }}万</h4>
    <button @click="updateMoney(2)">修改钱</button>
  </div>
</template>

<script setup lang="ts" name="GrandChild">
import { inject } from 'vue';
const { money, updateMoney } = inject('moneyContext', { money: 0, updateMoney: (value: number) => { } })
let car = inject('car', { brand: "奇瑞", price: 1 })
</script>

<style scoped>
.grand-child {
  background-color: orange;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px black;
}
</style>